<template>
    <div class="community-container">
      <div class="header">
        <h1>{{ userProfile.name }} 的个人主页</h1>
        <p>查看用户的最新动态和参与的话题</p>
      </div>
  
      <div class="content-area">
        <div class="user-profile">
          <div class="avatar-section">
            <img :src="userProfile.avatar" class="avatar-large">
            <h2>{{ userProfile.name }}</h2>
            <p>注册时间：{{ userProfile.registerDate }}</p>
          </div>
          
          <div class="stats">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="stat-item">
                  <span class="count">{{ userProfile.posts }}</span>
                  <span>帖子</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-item">
                  <span class="count">{{ userProfile.replies }}</span>
                  <span>回复</span>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="stat-item">
                  <span class="count">{{ userProfile.followers }}</span>
                  <span>粉丝</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
  
        <div class="user-activities">
          <el-tabs v-model="activeTab">
            <el-tab-pane label="最新动态" name="posts">
              <el-card v-for="post in userProfile.postsList" :key="post.id" class="activity-card">
                <h3>{{ post.title }}</h3>
                <p>{{ post.content }}</p>
                <div class="post-meta">
                  <span>发布于：{{ post.date }}</span>
                  <span>分类：{{ post.category }}</span>
                </div>
              </el-card>
            </el-tab-pane>
            
            <el-tab-pane label="参与话题" name="topics">
              <el-card v-for="topic in userProfile.topics" :key="topic.id" class="activity-card">
                <router-link :to="`/community/topics/${topic.id}`">{{ topic.title }}</router-link>
                <p>{{ topic.content }}</p>
              </el-card>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
  
      <!-- <el-menu
        :default-active="$route.path"
        mode="horizontal"
        class="bottom-nav"
        @select="handleNavSelect"
      > -->
        <!-- 底部导航保持统一 -->
      <!-- </el-menu> -->
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  
  const userProfile = ref({
    id: 1,
    name: '园艺大师',
    avatar: 'https://example.com/avatar.jpg',
    registerDate: '2023-01-15',
    posts: 24,
    replies: 56,
    followers: 1890,
    postsList: [
      { id: 1, title: '春季种植指南', content: '...', date: '2023-03-20', category: '种植技术' },
      { id: 2, title: '阳台种菜技巧', content: '...', date: '2023-04-10', category: '种植指南' }
    ],
    topics: [
      { id: 1, title: '如何防治蚜虫？', content: '...', date: '2023-08-01' },
      { id: 2, title: '番茄高产秘诀', content: '...', date: '2023-08-05' }
    ]
  })
  
  const activeTab = ref('posts')
  </script>
  
  <style scoped>
  .avatar-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #409EFF;
  }
  
  .stats {
    margin-top: 20px;
    text-align: center;
  }
  
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  
  .count {
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
  }
  
  .activity-card {
    margin-bottom: 20px;
    border: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  
  .tabs {
    margin-top: 20px;
  }
  </style>